<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>task02</title>
    <link rel="stylesheet" href="task02.css">
</head>
<body>
<header id="header">
    <img id="task-logo" src="logo.png" alt="logo">
    <nav class="header-nav">
        <ul id="header-ul">
            <li><a href="#">导航链接一</a></li>
            <li><a href="#">导航链接二</a></li>
            <li><a href="#">导航链接三</a></li>
            <li><a href="#">导航链接四</a></li>
        </ul>
    </nav>
</header>
<div id="task-container">
<article class="task-article">
    <header>
        <h2 class="h2">文章一级标题</h2>
        <h3 class="h3">文章二级标题</h3>
    </header>
    <section>
        <p class="article-info"><span>文章作者</span>&nbsp;<time>文章发表时间</time></p>
        <p class="article-p">
            这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了<br/>
            这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了<br/>
            这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落,这是一个很长很长的段落,<strong>这里有个粗体字</strong>这是一个很长很长的段落,
            这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落.
        </p>
        <img src="helloIMG.jpg" alt="helloIMG">
        <p class="article-p">
            这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<br/>换行了
            这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,
            这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<strong>这里有个粗体字</strong>这是一个很长很长的段落,<a href="http://ife.baidu.com" target="_blank">这里有一个链接点击后打开新窗口链接到http://ife.baidu.com</a>
            这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落.
        </p>
    </section>
</article>


<article class="task-article">
    <header>
        <h2 class="h2">另一篇文章一级标题</h2>
        <h3 class="h3">文章二级标题</h3>
    </header>
    <section>
        <p class="article-info"><span>文章作者</span>&nbsp;<time>文章发表时间</time></p>
        <p class="article-p">
            这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<br/>换行了
            这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了<br/>
            这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落,这是一个很长很长的段落,<strong>这里有个粗体字</strong>这是一个很长很长的段落,
            这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落.
        </p>
        <img src="helloIMG.jpg" alt="helloIMG">
        <ul class="article-ul">
            <li>列表项目一</li>
            <li>列表项目二</li>
            <li>列表项目三</li>
        </ul>
    </section>
</article>
    <article class="task-article">
        <h2>图片</h2>
        <figure>
            <figcaption>好看的图片</figcaption>
            <img src="helloIMG.jpg" alt="图片" />
        </figure>
        <figure>
            <figcaption>好看的图片</figcaption>
            <img src="helloIMG.jpg" alt="图片" />
        </figure>
        <figure>
            <figcaption>好看的图片</figcaption>
            <img src="helloIMG.jpg" alt="图片" />
        </figure>
        <figure>
            <figcaption>好看的图片</figcaption>
            <img src="helloIMG.jpg" alt="图片" />
        </figure>
        <figure>
            <figcaption>好看的图片</figcaption>
            <img src="helloIMG.jpg" alt="图片" />
        </figure>
        <figure>
            <figcaption>好看的图片</figcaption>
            <img src="helloIMG.jpg" alt="图片" />
        </figure>
        <figure>
            <figcaption>好看的图片</figcaption>
            <img src="helloIMG.jpg" alt="图片" />
        </figure>
        <figure>
            <figcaption>好看的图片</figcaption>
            <img src="helloIMG.jpg" alt="图片" />
        </figure>
        <figure>
            <figcaption>好看的图片</figcaption>
            <img src="helloIMG.jpg" alt="图片" />
        </figure>
        <figure>
            <figcaption>好看的图片</figcaption>
            <img src="helloIMG.jpg" alt="图片" />
        </figure>
    </section>
</article>

<article class="task-article">
    <header>
        <h2 class="h2">最后一篇文章一级标题</h2>
        <h3 class="h3">文章二级标题</h3>
    </header>
    <p class="article-info">文章作者&nbsp;文章发表时间</p>
    <ol id="article-ol">
        <li>排名1</li>
        <li>排名2</li>
        <li>排名3</li>
    </ol>
    <div>
        <p>下面是一个表格,给表格加了一个border="1"好让你看出是一个表格</p>
        <table id="article-table">
            <thead>
            <tr>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>表内容单元格</td>
                <td>表内容单元格</td>
                <td><a href="#">操作</a></td>
            </tr>
            <tr>
                <td>表内容单元格</td>
                <td>表内容单元格</td>
                <td><a href="#">操作</a></td>
            </tr>
            <tr>
                <td>表内容单元格</td>
                <td>表内容单元格</td>
                <td><a href="#">操作</a></td>
            </tr>
            <tr>
                <td>表内容单元格</td>
                <td>表内容单元格</td>
                <td><a href="#">操作</a></td>
            </tr>
            <tr>
                <td>总计</td>
                <td colspan="2">1000</td>
            </tr>
            </tbody>
        </table>
    </div>
</article>
<aside class="task-article">
    <h2 id="task-h2">这里以后是一个侧栏,这是侧栏的标题</h2>

    <form>
        <p><label>请输入邮箱地址:</label><input type="email" name="email" placeholder="这是一个文本输入框"></p>
        <p>邮箱地址请按要求格式输入</p>
        <p><label>请输入密码:</label><input type="password" name="password" placeholder="这事一个文本输入框"></p>
        <p><label>请重复输入密码:</label><input type="password" placeholder="这是一个文本输入框"></p>
        <p>密码请为6-16位英文数字</p>
        <div>
            <p><span>性别:</span><input type="radio" checked="checked" name="sex" /><span>男</span><input type="radio" name="sex"/><span>女</span></p>
            <p><span>城市:</span>
                <select name="city">
                    <option value="0"  selected="selected">北京</option>
                    <option value="1">杭州</option>
                    <option value="2">上海</option>
                    <option value="3">广州</option>
                </select>
            </p>
            <p><span>爱好</span>
                <input type="checkbox" name="habit">运动
                <input type="checkbox" name="habit">艺术
                <input type="checkbox" name="habit">科学
            </p>
            <p>
                <span>个人描述:</span>
            <textarea>这是一个多行输入框,输入您的个人描述</textarea> </p>
            <input type="submit" value="确认提交" class="submit">
        </div>
    </form>
</aside>
</div>
<footer>
    <p>版权所有&copy;</p>
</footer>
</body>
</html>